<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('新增入库单')"/>
	<style>
		.deer-cell {
			border-color: #d3dce6;
			height: 46px;
			border-style: solid;
			z-index: 200000;
			text-align: center;
		}
		.deer-cell .deer-cell-title {
			line-height: 44px;
			font-weight: bold;
			color: #99a9bf;
			width: auto;
		}
		.searchBox{
			width: 50px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			background-color: #409EFF;
			color: #FFFFFF;
			border-radius: 4px;
			display: inline-block;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container-div">
		<el-form label-position="left" :model="insert" :rules="rules" ref="insertForm" class="demo-ruleForm" :inline="true">
		<el-divider content-position="left" style="margin-bottom: 20px">入库单信息</el-divider>
		<div style="margin-left: 5%">
				<div style="display: inline-block">
					<el-form-item size="small" label="入库类型:" prop="type">
						<el-select v-model="insert.type" placeholder="请选择入库类型">
							<el-option label="试作品入库" value="4"></el-option>
							<el-option label="采购预收" value="5"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<div style="display: inline-block;">
					<el-form-item size="small" label="仓库:" prop="wareId">
						<el-select v-model="insert.wareId" placeholder="请选择仓库">
							<el-option label="原料库" value="原料库"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<div style="display: inline-block;">
					<el-form-item size="small" label="供应商:" prop="supplierId">
						<el-select @change="changeSup" v-model="insert.supplierId" placeholder="请选择供应商">
							<el-option v-for="(item, index) in suppliers" :key="index" :label="item.supplierName" :value="item.supplierId">{{item.supplierName}}</el-option>
						</el-select>
					</el-form-item>
				</div>
		</div>
		<el-divider content-position="left" style="margin-bottom: 20px">物料详情</el-divider>
		<div class="main" style="width: 100%;margin-left: 5%">
			<div style="display: inline-block">
				<el-form-item>
					<el-button size="small" @click="addDomain">点击添加</el-button>
				</el-form-item>
				<div v-for="(domain, index) in insert.itemList">
					<el-form-item label="物料编码:" :key="domain.key" :prop="'itemList.' + index + '.itemCode'" :rules="rules.itemCode" required>
						<el-input @focus="getItem(index)" placeholder="请点击选择物料" readonly size="small" v-model="domain.itemCode"></el-input>
					</el-form-item>
					<el-form-item style="margin-top:5px" size="small" label="采购数量:" :key="domain.key" :prop="'itemList.' + index + '.weight'":rules="{
						required: true, message: '请输入采购数量', trigger: 'change'
					}">
						<el-input v-model="domain.weight">
							<template slot="append">{{domain.unit}}</template>
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click.prevent="removeDomain(domain)">删除</el-button>
					</el-form-item>
				</div>
			</div>
		</div>
		</el-form>
		<el-dialog title="物料列表" width="60%" :visible.sync="dialogTableVisible">
			<el-row>
				<el-col :span="24">
					<el-form style="margin-left: 10px" :inline="true" :model="item.param" class="demo-form-inline">
						<el-form-item size="mini" label="关键字">
							<el-input size="mini" v-model="item.param.itemCode" placeholder="关键字"></el-input>
						</el-form-item>
						<el-form-item size="mini">
							<el-button size="mini" type="primary" @click="getItems()">查询</el-button>
						</el-form-item>
					</el-form>
					<el-table @row-click="setItem" border size="small" ref="multipleTable" height="315" :data="item.list">
						<el-table-column property="itemId" label="ID" v-if="false"></el-table-column>
						<el-table-column property="itemCode" label="物料编码"></el-table-column>
						<el-table-column property="itemName" label="物料描述"></el-table-column>
						<el-table-column width="80" property="sort" label="物料类型">
							<template slot-scope="scope">
                                <span v-if="scope.row.sort ==1">
                                    钢材
                                </span>
								<span v-if="scope.row.sort ==2">
                                    铜材
                                </span>
							</template>
						</el-table-column>
						<el-table-column width="80" property="unit" label="单位"></el-table-column>
					</el-table>
					<el-pagination
							@current-change="chengCurrentPage"
							:current-page="item.currentPage"
							:page-size="item.pageSize"
							layout="prev, pager, next"
							:total="item.total">
					</el-pagination>
				</el-col>
			</el-row>
<!--			<el-row style="margin-top: 10px;text-align: center">-->
<!--				<el-button size="mini" type="primary" @click="commitItems()">确定</el-button>-->
<!--				<el-button size="mini" type="info" @click="toggleSelection()">取消</el-button>-->
<!--			</el-row>-->
		</el-dialog>
	</div>
	<div th:include="include::footer"></div>
	<script th:src="@{/wms/js/date.js}"></script>
    <script type="text/javascript" charset="UTF-8">
		var prefix = ctx + "in/billInMaster"
		function submitHandler() {
			app.save();
		}
		var app = new Vue({
			el: '.container-div',
			data() {
				var validateDevice = (rule, value, callback) => {
					let newArr = this.insert.itemList.filter(item=>item.itemCode == value);
					if (!value) {
						return callback(new Error('请选择物料'));
					}
					if (newArr.length > 1) {
						return callback(new Error('该物料已选择，请重新选择'));
					} else {
						callback();
					}
				};
				return {
					rules:{
						wareId: [
							{ required: true, message: '请选择仓库', trigger: 'change' },
						],
						type: [
							{ required: true, message: '请选择入库类型', trigger: 'change' },
						],
						itemCode: [
							{ validator: validateDevice, trigger: 'blur' }
						],
						supplierId: [
							{ required: true, message: '请选择供应商', trigger: 'change' },
						],
					},
					dialogTableVisible: false,
					in: -1,
					item: {
						currentPage: 1,
						pageSize: 6,
						total: '',
						param: {
							itemCode: ''
						},
						list: []
					},
					insert: {
						supplierName: '',
						supplierId: '',
						type: '',
						wareId: '',
						itemList: [{
							weight: '',
							itemName: '',
							itemCode: '',
							sort: '',
							unit: 'kg',
							itemId: '',
						}]
					},
					suppliers: []
				}
			},
			methods: {
				changeSup(v) {
					console.log(v)
					let supplierName = this.suppliers.filter(item=>item.supplierId == v);
					this.insert.supplierName = supplierName[0].supplierName;
				},
				setItem(row, column, event) {
					this.dialogTableVisible = false;
					this.insert.itemList[this.in].itemId = row.itemId;
					this.insert.itemList[this.in].itemName = row.itemName;
					this.insert.itemList[this.in].itemCode = row.itemCode;
					this.insert.itemList[this.in].unit = row.unit;
					this.insert.itemList[this.in].sort = row.sort;
				},
				//物料列表分页
				chengCurrentPage: function(currentPage){
					this.item.currentPage = currentPage;
					this.getItems();
				},
				getItem(i) {
					this.in = i;
					this.dialogTableVisible = true;
					this.getItems();
				},
				removeDomain(item) {
					var index = this.insert.itemList.indexOf(item)
					if (index !== -1) {
						this.insert.itemList.splice(index, 1)
					}
				},
				addDomain() {
					this.insert.itemList.push({
						weight: '',
						itemName: '',
						sort: '',
						unit: 'kg',
						itemCode: '',
						itemId: '',
						key: Date.now()
					});
				},
				//关闭此页面
				closeModal: function(){
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				},
				//取消选择
				toggleSelection(){
					this.$refs.multipleTable.clearSelection();
					this.dialogTableVisible = false;
					this.selectItems = [];
				},
				//选择
				handleSelectionChange(items){
					this.selectItems = items;
				},
				//保存提交
				save: function(){
					var that = this;
					this.$refs['insertForm'].validate((valid) => {
						if (valid) {
							var data = {
								billInMaster: {
									supplierId: that.insert.supplierId,
									type: that.insert.type,
									supplierName: that.insert.supplierName
								},
								billInDetailList: that.insert.itemList
							}
							console.log(data)
							$.ajax({
								cache: true,
								url: prefix + '/insert',
								type: 'POST',
								async: false,
								dataType: "json",
								contentType: "application/json;charset-UTF-8",
								data: JSON.stringify(data),
								error: function (request) {
									$.modal.alertError("系统错误");
								},
								success: function (data) {
									if(data.code == 200){
										$.modal.msgReload(data.msg, "success")
									}else{
										$.modal.alertError(data.msg);
									}
								}
							})
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				},
				//获取供应商列表
				getSuppliers: function(){
					var that = this;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/system/supplier/list",
						data: {},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							that.suppliers = data.rows;
						}
					});
				},
				//获取物料列表
				getItems: function(){
					var that = this;
					var item = that.item;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/system/itemInfo/findList",
						data: {
							itemCode: item.param.itemCode,
							pageSize: item.pageSize,
							pageNum: item.currentPage
						},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							var msg = data.rows;
							for(var i = 0; i < msg.length; i++){
								if(msg[i].pd != null){
									msg[i].pd = msg[i].pd.slice(0, 10);
								}
							}
							that.item.list = msg;
							that.item.total = data.total;
						}
					});
				},
			},
			created(){
				this.getSuppliers();
			}
		})
	</script>
</body>
</html>
